<!-- 我的卡片 -->
<template>
	<div class="m-card mb-15">
		<div v-if="title" class="card-title">{{title}}</div>
		<div class="card-content">
			<slot></slot>
		</div>
	</div>
</template>
<script setup>
import { reactive, onMounted, ref } from 'vue';

const props = defineProps({
	title: {
		type: String
	},
})

onMounted(() => {
	
})
</script>
<style lang="scss" scoped>
:deep(.el-tabs__header) {
	margin-bottom: 0;
}
:deep(.el-tabs__nav) {
  margin-left: var(--gap-double);
}
:deep(.el-tabs__content) {
  height: calc(100% - 54px);
  padding: 0 20px;
}
.m-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	.card-title {
		position: relative;
		height: 50px;
		padding: 0 15px 0 30px;
		line-height: 50px;
		font-size: 16px;
		&:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 21px;
			margin-top: -7px;
			width: 5px;
			height: 14px;
			background: var(--el-color-primary);
			border-radius: 2px;
		}
		.more-btn {
			position: absolute;
			right: 15px;
			top: 13px;
			z-index: 1;
			line-height: 20px;
		}
	}
	.card-content {
		flex: 1;
		height: 0;
		position: relative;
	}
}
</style>